<!-- 邀请好友页面 -->
<!--XXX 已弃用，考虑删除 -->
<template>
  <div class="page">
    <div class="container">
      <!-- 背景 -->
      <div class="bg">
        <image
          class="bg-img"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/invite-friend-bg.png?replace=true"
        />
      </div>
      <!-- 标题栏 -->
      <uni-nav-bar
        class="nav-bar"
        title="分享好友"
        color="#ffffff"
        status-bar="true"
        :border="false"
        left-icon="left"
        @clickLeft="back"
      />
      <!-- 标题 -->
      <div class="title">
        <image
          class="title-img"
          src="https://ustatic.hudongmiao.com/joymew-host-contest/invite-friend-title.png"
          mode="aspectFill"
        />
      </div>
      <!-- 中奖信息广播 -->
      <!-- <div class="broadcast">
        <div class="broadcast-avatar">
          <image class="img" src="https://img.yzcdn.cn/vant/cat.jpeg" mode="aspectFill"></image>
        </div>
        <text class="text-left"> 恭喜 </text>
        <text class="account-name">温暖的李宁</text>
        <text class="text-right"> 获得了苹果14一部 </text>
      </div> -->
      <div class="invite-old-user">
        邀请一个老用户必得
      </div>
      <div class="miaodou-each">
        <text class="miaodou-each-num">
          50
        </text>
        <text class="miaodou">
          &nbsp;喵豆
        </text>
      </div>
      <div class="total-miaodou">
        邀请好友已累计获得：
        <text class="total-miaodou-num">
          {{ miaodouStatus.inviteMiaodou }}
        </text>
        喵豆
      </div>
      <!-- 活动时间 -->
      <div class="activity-time">
        <text class="activity-time-text">
          活动时间：2023.04.28-2023.05.31
        </text>
      </div>
      <!-- 如何获取喵豆说明 -->
      <div class="method">
        <div class="method-title">
          <!-- 装饰用的横线 -->
          <div class="method-title-decoration left" />
          <div class="method-title-text">
            如何获取更多喵豆
          </div>
          <div class="method-title-decoration right" />
        </div>
        <div class="method-content">
          1.邀请老用户参与活动即获得50喵豆
          <br>
          2.邀请新用户，该用户需要在嗨喵悦动大屏完成一场有效活动，即可获得500喵豆
          <br>
          3.邀请的用户越多，互动影响力排行榜排名越高，奖励越丰厚，快和你的小伙伴们一起赢好礼吧~
        </div>
      </div>
      <!-- 邀请列表 -->
      <div class="invite-list">
        <!-- 标签 -->
        <div class="tabs">
          <!-- 底部滑块 -->
          <div
            class="slider"
            :class="currentTab === 'my-invite-list' ? 'left' : 'right'"
          />
          <div
            class="tab-my-invite"
            :class="currentTab === 'my-invite-list' ? 'active' : ''"
            @click="clickTab('my-invite-list')"
          >
            我的邀请(0)
          </div>
          <div
            class="tab-invite-rank"
            :class="currentTab === 'invite-rank' ? 'active' : ''"
            @click="clickTab('invite-rank')"
          >
            邀请排行
          </div>
        </div>
        <!-- 我的邀请和邀请排行内容 -->
        <div class="content">
          <swiper
            class="swiper"
            :current="currentSwiperIndex"
            @change="swiperChange"
          >
            <swiper-item>
              <!-- 邀请好友提示 -->
              <div
                v-if="inviteList.length === 0"
                class="invite-friend-tips"
              >
                咦～还没有邀请过好友<br> 快去邀请好友赚喵币吧～
              </div>
              <!-- 我的邀请 -->
              <div
                v-if="inviteList.length != 0"
                class="my-invite"
              >
                <div
                  v-for="item in inviteList"
                  :key="item.id"
                  class="my-invite-item"
                >
                  <!-- 头像 -->
                  <image
                    class="avatar"
                    :src="item.avatar"
                  />
                  <!-- 昵称 -->
                  <text
                    class="nickname"
                    :class="item.status != 1 ? 'new-user-name' : ''"
                  >
                    {{ item.nickname }}
                  </text>
                  <!-- 喵豆 -->
                  <text
                    v-if="item.status === '1'"
                    class="miaodou"
                  >
                    <text class="miaodou-num">
                      {{
                        item.miaodou }}
                    </text>喵豆
                  </text>
                  <!-- 只有未完成任务的新用户才会显示的内容 -->
                  <!-- 新用户标记 -->
                  <text
                    v-if="item.status != 1"
                    class="new-user"
                  >
                    新用户
                  </text>
                  <!-- 完成任务提示 -->
                  <text
                    v-if="item.status != 1"
                    class="complete-task"
                  >
                    完成一场有效活动(单场签到人数大于30人)
                  </text>
                  <!-- 进度 -->
                  <div
                    v-if="item.status != 1"
                    class="progress"
                  >
                    进度0/1
                  </div>
                </div>
              </div>
              <!-- 邀请排行 -->
            </swiper-item>
            <swiper-item>
              <div class="invite-rank">
                <div
                  v-for="item in influenceRank"
                  :key="item.id"
                  class="invite-rank-item"
                >
                  <!-- 排名 -->
                  <image
                    v-if="item.rank <= 3"
                    class="rank-img"
                    :src="rankIcon(item.rank)"
                  />
                  <text
                    v-else
                    class="rank-num"
                  >
                    {{ item.rank }}
                  </text>
                  <!-- 头像 -->
                  <image
                    class="avatar"
                    :src="item.avatar"
                  />
                  <!-- 昵称 -->
                  <text class="nickname">
                    {{ item.name }}
                  </text>
                  <!-- 邀请人数 -->
                  <text class="invite-num">
                    <text class="emphasize">
                      {{ item.inviteNum }}
                    </text>人
                  </text>
                </div>
              </div>
            </swiper-item>
          </swiper>
        </div>
      </div>
      <!-- 海报邀请按钮 -->
      <div
        class="poster-invite-btn"
        @click="setInvitePopupType('poster')"
      >
        <!-- 背景 -->
        <div class="bg" />
        <text class="text">
          海报邀请
        </text>
      </div>
      <!-- 邀请好友按钮 -->
      <button
        id="invite-friend"
        class="invite-friend-btn"
        open-type="share"
      >
        <div class="bg" />
        <text class="text">
          邀请好友
        </text>
      </button>

      <!-- 海报邀请组件 -->
      <invite-friend-poster-share
        v-show="invitePopupType === 'poster'"
        class="poster-invite-components"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { usePopup } from '@/stores/popup';
import { useRank } from '@/stores/rank';
import { useUser } from '@/stores/user';
import { back } from '@/utils/navigate';

const user = useUser();
const { getInviteList, getInviteMiaodou } = user;
const { inviteList, userInfo, miaodouStatus } = storeToRefs(user);

const rank = useRank();
const { influenceRank } = storeToRefs(rank);
const { getInfluenceRank } = rank;

const popup = usePopup();
const { invitePopupType } = storeToRefs(popup);
const { setInvitePopupType } = popup;

// 获取我的邀请列表和邀请排行榜，以及通过邀请累计获得的喵豆
onMounted(async () => {
  await getInviteList();
  await getInfluenceRank();
  await getInviteMiaodou();
});

// #region 列表切换
/** 当前显示的swiper */
const currentSwiperIndex = ref(0);

/** 当前展示的tab */
const currentTab = ref<'my-invite-list' | 'invite-rank'>('my-invite-list');
/**
 * 点击tab
 * @returns
 * @param tab
 * @description 点击tab，切换对应的内容
 */
const clickTab = (tab: 'my-invite-list' | 'invite-rank') => {
  currentSwiperIndex.value = tab === 'my-invite-list' ? 0 : 1;
  currentTab.value = tab;
};

/** swiper改变时的回调函数
 * @param e
 * @description swiper改变时，改变currentSwiperIndex的值
 */
const swiperChange = (e: any) => {
  // currentSwiperIndex.value = e.detail.current;
  currentTab.value = e.detail.current === 0 ? 'my-invite-list' : 'invite-rank';
};
// #endregion

// 排行榜图标
const rankIcon = (rank: number) => {
  switch (rank) {
    case 1:
      return '/static/icons/common/rank-icon-1.png';
    case 2:
      return '/static/icons/common/rank-icon-2.png';
    case 3:
      return '/static/icons/common/rank-icon-3.png';
    default:
      return '';
  }
};

// /** 显示分享菜单 */
// onShow(() => {
//   console.log('invite onShow')
//   uni.showShareMenu({
//     withShareTicket: true,
//     menus: ['shareAppMessage', 'shareTimeline']
//   })
// })

// 分享时的回调
onShareAppMessage((res) => {
  console.log('分享时的回调', res);
  const { userInfo } = storeToRefs(user);
  const title = `@${userInfo?.value.nickname ?? '好友'}邀请你参加嗨喵51狂欢季，领多重豪礼！`;
  const path = `/pages/index?inviteKey=${userInfo?.value.inviteKey}&userId=${userInfo?.value.userId}`;
  const imageUrlList = ['https://ustatic.hudongmiao.com/joymew-host-contest/invite-friend-share-cover.png',
    'https://ustatic.hudongmiao.com/joymew-host-contest/invite-friend-share-cover-2.png',
    'https://ustatic.hudongmiao.com/joymew-host-contest/invite-friend-share-cover-3.png',
  ];
  // 从图片列表中随机选择一张图片
  const imageUrl = imageUrlList[Math.floor(Math.random() * imageUrlList.length)];
  return {
    title,
    path,
    imageUrl,
  };
});

</script>

<style lang="scss" scoped>
// 设置导航栏透明
::v-deep .uni-navbar {
  .uni-navbar__content,
  .uni-navbar__header {
    background-color: rgba($color: #000, $alpha: 0%) !important;
  }
}

.page {
  position: relative;

  width: 100vw;
  height: 100vh;
  overflow: scroll;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }

  .container {
    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;

    display: grid;
    grid-template:
      "nav-bar" auto
      "." 10px
      "title" 101.9998px
      "." 8.0001px
      "broadcast" 7.1795vw
      "." 115vw
      "method" auto
      "." 4.1026vw
      "invite-list" 103.3333vw
      "." 40vw;
    justify-items: center;

    // 背景
    .bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1000;

      width: 100vw;
      height: 100%;

      background: #036df7;

      display: flex;

      .bg-img {
        width: 100vw;
        height: 177.7769vw;
      }
    }

    // 导航栏
    .nav-bar {
      grid-area: nav-bar;

      width: 100vw;
    }

    // 标题
    .title {
      grid-area: title;

      width: 89.7436vw;
      height: 25.4462vw;

      .title-img {
        width: 100%;
        height: 100%;
      }
    }

    // 中奖广播信息
    .broadcast {
      grid-area: broadcast;

      width: 57.4359vw;
      height: 7.1795vw;

      // 文字不换行，且超出部分显示省略号
      overflow: hidden;

      background: rgba($color: #000, $alpha: 40%);
      border-radius: 7.9487vw;

      display: grid;
      grid-template:
        ". avatar . text-left account-name text-right ." 1fr
        / 4px 25px auto 20px 1fr 1fr 8px;
      align-items: center;

      font-size: 12px;
      text-overflow: ellipsis;
      white-space: nowrap;

      // 头像
      .broadcast-avatar {
        grid-area: avatar;

        width: 5.1282vw;
        height: 5.1282vw;
        overflow: hidden;

        border-radius: 50%;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      // 左侧文字
      .text-left {
        grid-area: text-left;

        width: 6.4103vw;

        color: #fff;
      }

      .account-name {
        grid-area: account-name;
        justify-self: center;

        color: #EFFD96;
      }

      // 右侧文字
      .text-right {
        grid-area: text-right;
        justify-self: end;

        color: #fff;
      }
    }

    // 邀请老用户必得
    .invite-old-user {
      position: absolute;
      top: 105vw;
      left: 50%;

      transform: translateX(-50%);

      font-size: 20px;
      font-weight: 600;
      color: #fff;
    }

    // 邀请每人可得喵豆数量
    .miaodou-each {
      position: absolute;
      top: 115vw;
      left: 50%;

      transform: translateX(-50%);

      color: #fff;

      .miaodou-each-num {
        font-size: 72px;
        font-weight: 700;
        line-height: 72px;
      }

      .miaodou {
        font-size: 20px;
        line-height: 20px;
      }
    }

    // 已累计获得喵豆
    .total-miaodou {
      position: absolute;
      top: 140vw;
      left: 50%;

      width: 100%;

      transform: translateX(-50%);

      font-size: 15px;
      color: #fff;
      text-align: center;

      .total-miaodou-num {
        color: #FDFFAC;
      }
    }

    // 活动时间
    .activity-time {
      position: absolute;
      top: 151.2821vw;
      left: 50%;

      width: 100%;

      transform: translateX(-50%);

      font-size: 13px;
      color: #fff;
      text-align: center;
    }

    // 如何获得喵豆说明
    .method {
      grid-area: method;

      width: 91.7949vw;

      background: linear-gradient(119deg, #ebf7ff, #abd6ff 100%);
      border: 1px solid #fff;
      border-radius: 3.0769vw;

      display: grid;
      grid-template:
        '.' 5.1282vw
        "title" 3.8462vw
        "." 5.1282vw
        "content" auto
        "." 5.1282vw
        / 1fr;
      justify-items: center;

      // 标题
      .method-title {
        grid-area: title;

        display: flex;
        align-items: center;
        justify-items: center;

        // 装饰用的线
        .method-title-decoration {
          width: 13.3333vw;
          height: .5128vw;

          &.left {
            background: linear-gradient(90deg, rgb(45 181 255 / 0%), #6591ff 100%);
          }

          // 右边的装饰
          &.right {
            background: linear-gradient(270deg, rgb(45 181 255 / 0%), #6591ff 100%);
          }
        }

        .method-title-text {
          margin: 0 10px;

          // 文字从上到下线性渐变
          background: linear-gradient(180deg, #2DB5FF 100%, #6591FF 100%);
          background-clip: text;

          font-size: 17px;
          line-height: 17px;
          -webkit-text-fill-color: transparent;
        }

      }

      // 内容
      .method-content {
        grid-area: content;

        width: 84.359vw;

        font-size: 15px;
        line-height: 25px;
        color: #336de3;
      }
    }

    // 邀请列表
    .invite-list {
      grid-area: invite-list;

      width: 91.7949vw;

      background: linear-gradient(138deg, #ebf7ff, #abd6ff 100%);
      border: 1px solid #fff;
      border-radius: 3.0769vw;

      display: grid;
      grid-template:
        "." 20px
        "tabs" 13.0769vw
        "." 15px
        "content" 76.9231vw;
      justify-items: center;

      // 顶部标签
      .tabs {
        grid-area: tabs;

        position: relative;

        width: 253px;

        background: #fff;
        border: 1px solid #2684ff;
        border-radius: 47px;

        display: flex;
        align-items: center;
        justify-content: space-evenly;

        .tab-my-invite,
        .tab-invite-rank {
          z-index: 100;

          width: 90px;

          transition: all 0.3s;

          font-size: 17px;
          font-weight: 500;
          line-height: 17px;
          color: #6591FF;

          &.active {
            color: #fff;
          }
        }

        // 滑块
        .slider {
          position: absolute;
          top: 50%;
          z-index: 1;

          width: 119px;
          height: 41px;

          background: linear-gradient(90deg, #2db5ff, #6591ff 100%);
          border-radius: 47px;

          transition: all 0.3s;

          &.left {
            transform: translateX(-60px) translateY(-50%);
          }

          &.right {
            transform: translateX(60px) translateY(-50%);
          }
        }
      }

      // 邀请好友提示
      .invite-friend-tips {
        position: absolute;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        font-size: 15px;
        line-height: 25px;
        color: #336de3;
      }

      // 列表内容
      .content {
        grid-area: content;

        width: 100%;

        .swiper {
          height: 100%;

          // 我的邀请
          .my-invite {
            width: calc(100% - 32px);
            overflow: scroll;

            padding: 0 16px;
            display: flex;
            flex-direction: column;
            align-items: center;

            // 隐藏滚动条
            &::-webkit-scrollbar {
              display: none;
            }

            // 我的邀请项
            .my-invite-item {
              margin-bottom: 12px;

              width: 100%;
              height: 9.7436vw;

              display: grid;
              grid-template:
                "avatar nickname nickname nickname right" 1fr
                "avatar nickname nickname nickname right" 1fr
                / 12.3077vw 10.2564vw 5.0002px 1fr 15.3846vw;
              align-items: center;

              // 头像
              .avatar {
                grid-area: avatar;

                width: 9.7436vw;
                height: 9.7436vw;

                border-radius: 50%;
              }

              // 昵称
              .nickname {
                grid-area: nickname;

                font-size: 17px;
                color: #336de3;

                // 新用户的昵称
                &.new-user-name {
                  grid-row: 1/1;
                  grid-column: 2/span 3;
                }
              }

              // 完成任务的喵豆
              .miaodou {
                grid-area: right;
                justify-self: end;

                font-size: 15px;
                font-weight: 500;
                color: #336DE3;

                .miaodou-num {
                  color: #ff372b;
                }
              }

              // 新用户标记
              .new-user {
                grid-area: 2/2;

                width: 10.2564vw;
                height: 4.1026vw;

                background: #ff483d;
                border-radius: 2px;

                font-size: 2.0513vw;
                line-height: 4.1026vw;
                color: #fff;
                text-align: center;
              }

              // 去完成任务的提示
              .complete-task {
                grid-area: 2/4;

                font-size: 2.2vw;
                color: #336de3;
              }

              // 任务完成进度
              .progress {
                grid-area: right;
                justify-self: end;

                font-size: 3.8462vw;
                color: #336de3;
              }
            }
          }

          // 邀请排行
          .invite-rank {
            width: calc(100% - 32px);
            height: 100%;
            overflow: scroll;

            padding: 0 16px;
            display: flex;
            flex-direction: column;
            align-items: center;

            // 隐藏滚动条
            &::-webkit-scrollbar {
              display: none;
            }

            // 邀请排行项
            .invite-rank-item {
              margin-bottom: 12px;

              width: 100%;
              height: 9.7436vw;

              display: grid;
              grid-template:
                "rank avatar . nickname invite-num" 1fr
                / 10.2564vw 9.7436vw 3.0769vw 1fr 12vw;
              align-items: center;

              // 图片形式的排名
              .rank-img {
                grid-area: rank;

                width: 6.1538vw;
                height: 6.1538vw;
              }

              // 文字形式的排名
              .rank-num {
                grid-area: rank;

                width: 6.1538vw;
                height: 6.1538vw;

                background: #00a5ff;
                border-radius: 50%;
                opacity: 0.8;

                font-size: 3.5897vw;
                line-height: 6.1538vw;
                color: #fff;
                text-align: center;
              }

              // 头像
              .avatar {
                grid-area: avatar;

                width: 9.7436vw;
                height: 9.7436vw;

                border-radius: 50%;
              }

              // 昵称
              .nickname {
                grid-area: nickname;

                font-size: 5.1282vw;
                color: #4882d5;
              }

              // 邀请人数
              .invite-num {
                grid-area: invite-num;
                justify-self: end;

                font-size: 4.359vw;
                color: #336de3;

                .emphasize {
                  font-size: 3.8462vw;
                  font-weight: 500;
                  color: #ff372b;
                }
              }
            }
          }
        }
      }
    }

    // 海报邀请按钮和邀请好友按钮
    .poster-invite-btn,
    .invite-friend-btn {
      // 固定显示在屏幕底部
      position: fixed;
      bottom: 100px;
      z-index: 999;

      width: 38.9744vw;
      height: 12.3077vw;

      background: linear-gradient(90deg, #fff49e, #f6af0f 100%);
      border-radius: 10vw;

      display: flex;
      align-items: center;
      justify-content: center;

      // 背景（紧贴文字的那一层）
      .bg {
        position: absolute;
        top: 50%;
        left: 50%;

        width: 34.6154vw;
        height: 9.7436vw;

        background: linear-gradient(179deg, #fff 76%, rgb(255 255 255 / 0%) 100%);
        border-radius: 11.7949vw;
        opacity: 0.4;

        transform: translate(-50%, -50%);
      }

      // 文字
      .text {
        font-size: 5.3846vw;
        font-weight: 600;
        color: #ff372b;
      }
    }

    // 海报邀请按钮
    .poster-invite-btn {
      left: 8.9744vw;
    }

    // 邀请好友按钮
    .invite-friend-btn {
      right: 8.9744vw;
    }

    // 海报邀请组件
    .poster-invite-components {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;

      width: 100vw;
      height: 100vh;
    }
  }
}
</style>
